<script src="../../filter/index.js"></script>
<template>
  <div>
    <el-row>
      <bread-crumb first="系统设置" second="数据字典"></bread-crumb>
    </el-row>
    <el-row>
      <!--<el-form>-->
      <!--<el-form-item label="用户名"></el-form-item>-->
      <!--</el-form>-->
      <el-form label-width="100px">
        <el-col :span="6">
          <el-form-item label="字典值">
            <el-input v-model="query.value"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="字典类别">
            <el-select v-model="selected">
              <!-- 数据来自ajax  v-for查询-->
              <el-option v-for="(item,index) in query.dictionaryType" :label="item.type" :value="item.id" :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="字典标识">
            <el-input></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item >
            <el-button type="success"  @click="queryList(query.value)"><i class="fa fa-search" aria-hidden="true"></i>搜索</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-button type="success" icon="el-icon-plus" size="small" @click="dialog.dialogFormVisible=true">添加</el-button>
      <el-table
        :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"
       :stripe="true"
        style="width: 100%">
        <el-table-column
          prop="value"
          label="字典值"
        >
        </el-table-column>
        <el-table-column
          prop="dictionaryType"
          label="字典类别"
          width="180">
        </el-table-column>
        <el-table-column
          prop="symbol"
          label="字典标识">
        </el-table-column>
        <el-table-column
          prop="usable"
          label="是否启用">
          <template slot-scope="scope">
            <i class="fa" :class="scope.row.usable|changeBoolToTag"></i>
            <!--scope.row获取当前行对应的属性值-->
          </template>
        </el-table-column>
        <el-table-column
        label="操作">
            <template slot-scope="scope">
              <el-button-group>
               <el-button type="danger" @click="deleteRow(scope.$index,list)" size="small" icon="el-icon-close">
                 <!--scope.$index获取当前行下标-->
                  删除
               </el-button>
              <el-button type="warning" size="small" icon="el-icon-edit" @click="showEditDialog">
                修改
              </el-button>
              </el-button-group>
            </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="dialog.dialogFormVisible" title="添加字典">
        <el-form label-width="80px">
           <el-form-item label="字典值">
               <el-input v-model="dialog.dictionary.value"></el-input>
           </el-form-item>
          <el-form-item label="字典类别">
            <el-select v-model="dialog.dictionary.dictionaryType" style="width:100%">
              <!-- 数据来自ajax  v-for查询-->
              <el-option v-for="(item,index) in query.dictionaryType" :label="item.type" :value="item.type" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字典标识">
            <el-input v-model="dialog.dictionary.symbol"></el-input>
          </el-form-item>
          <el-form-item>
             <el-button type="primary" @click="insertHandle">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog
        title="修改字典"
        :visible.sync="editDialogVisible"
        width="50%">

        <el-form label-width="80px">
          <el-form-item label="字典值">
            <el-input v-model="dialog.dictionary.value"></el-input>
          </el-form-item>
          <el-form-item label="字典类别">
            <el-select v-model="dialog.dictionary.dictionaryType" style="width:100%">
              <!-- 数据来自ajax  v-for查询-->
              <el-option v-for="(item,index) in query.dictionaryType" :label="item.type" :value="item.type" :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="字典标识">
            <el-input v-model="dialog.dictionary.symbol"></el-input>
          </el-form-item>
        </el-form>


    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editDialogVisible = false">确 定</el-button>


      </el-dialog>
      <el-col :span="6" :offset="6">
        <el-pagination background
                       layout="prev, pager, next, sizes, total, jumper"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pagesize"
                       :total="list.length"
                       @current-change="handleCurrentChange"
                       @size-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import BreadCrumb from '../../components/ Breadcrumb/indexBreadcrumd'
  export default {
    name: "dictionary",
    data: function () {
      return {
        list: [],
       query:{
          dictionaryType:'',
         value:''
       },
        dialog:{
          dialogFormVisible:false,
          value:'',
          dictionary:{
            value:'',
            dictionaryType:'',
            symbol:''
          }
        },
        selected:'',
        total: 20,
        pagesize:5,
        currpage:1,
        editDialogVisible:false,

      }
    },
    components: {
      BreadCrumb
    },
    mounted() {
      this.queryList();
      this.initDictionaryType();
    },
    methods:{
      queryList:function(value){
        let _this = this;
        this.axios({
          url: '/mock/dictionary/list',
          method: 'get',
        }).then(function (res) {
          _this.list = res.data.list;
       if(value){
         _this.list=_this.list.filter(function (item) {
           /*多条件查询*/
           return item.value.includes(value)&& _this.query.dictionaryType[_this.selected-1].type==item.dictionaryType
         })
       }
        })
      },
      queryForSave:function(dictionary){
        let _this = this;
        this.axios({
          url: '/mock/dictionary/list',
          method: 'get',
        }).then(function (res) {
            _this.list=res.data.list;
            _this.list.unshift(dictionary);
            _this.dialog.dialogFormVisible=false;
        })
      },
      initDictionaryType:function(){
        let _this=this;
        this.axios({
          url:'/mock/dictionary/dictionaryType',
          method:'get'
        }).then(function (res) {
          _this.query.dictionaryType=res.data

        })
      },deleteRow:function (index,list) {
        list.splice(index,1);
      },handleCurrentChange(cpage) {
        this.currpage = cpage;
      },
      handleSizeChange(psize) {
        this.pagesize = psize;
      },
      insertHandle:function () {

       /* const dictionaryTypes=[
          {
            id:1,
            type:'大学'
          },{
            id:2,
            type:'政治面貌'
          },{
            id:3,
            type:'民族'
          },{
            id:4,
            type:'学历'
          },{
            id:5,
            type:'水果'
          }
        ]
        this.dialog.dictionary.dictionaryType=dictionaryTypes.filter(function (item) {
          return item.id==this.dialog.dictionary.dictionaryType

        })[0];*/
          /*
          * 发起ajax，保存到数据库
          *
          *
          * 把模态窗体上获得的数据，放到第一行
          * */

          this.queryForSave(this.dialog.dictionary);





      },
      showEditDialog:function () {

   this.editDialogVisible=true;
      }


     /* selectHandle:function () {
        let _this=this;
        this.list=this.list.filter(function (item) {
          return
        })
      }*/
    }
  }
</script>

<style scoped>
  .el-row{
    margin-bottom: 20px;
  }
</style>
